<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>SessionStorage</h1><!-- 不会将数据保存到本地硬盘，关闭浏览器会清除所有数据
    会话存储的数据不会被保存在用户的硬盘上 -->
    <button onclick="saveData()">保存数据</button>
    <button onclick="readData()">读取数据</button>
    <button onclick="deleteData()">删除数据</button>
    <button onclick="deleteAllData()">清空数据</button>
</body>
<script>
    let p = { name: 'mimi' }
    function saveData() {
        window.sessionStorage.setItem('msg', 'hello!!!!');
        window.sessionStorage.setItem('person', JSON.stringify(p));//键和值保存时都会调用toString方法保存为字符串形式,相同的key它的value值会被后者替换,JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串，而JSON.parse()可以将JSON字符串转为一个对象。JSON.parse()需要注意一点，由于此方法是将JSON字符串转换成对象，所以你的字符串必须符合JSON格式，即键值都必须使用双引号包裹;

    };
    function readData() {//读一个没有的数据返回值为null
        console.log(window.sessionStorage.getItem('msg'));//返回类型为string
        const jsonString = window.sessionStorage.getItem('person');
        console.log(JSON.parse(jsonString));//json.parse(null)结果为null
    };
    function deleteData() {
        window.sessionStorage.removeItem('msg');
    };
    function deleteAllData() {
        window.sessionStorage.clear();
    }
</script>

</html>